// script.js
document.addEventListener('DOMContentLoaded', function() {
  const products = [
    { id: 1, name: '篮球', price: '￥99', image: 'src/img/basketball1.jpg' },
    { id: 2, name: '足球', price: '￥199', image: 'src/img/football2.jpg' },
    { id: 3, name: '网球拍', price: '￥299', image: 'src/img/tennis3.jpg' },
    { id: 4, name: '羽毛球拍', price: '￥399', image: 'src/img/badmition4.jpg' },
    { id: 5, name: '跑步鞋', price: '￥499', image: 'src/img/running5.jpg' },
    { id: 6, name: '风之翼', price: '￥999', image: 'src/img/6.jpg' },
    { id: 7, name: '棒球棍', price: '￥288', image: 'src/img/棒球棍.jpg' },
    { id: 8, name: '网球', price: '￥20', image: 'src/img/网球.jpg' },
    { id: 9, name: '羽毛球', price: '￥120', image: 'src/img/羽毛球.jpg' },
    { id: 10, name: '高尔夫球杆', price: '￥1888', image: 'src/img/高尔夫球棍.jpg' },
    { id: 11, name: '', price: '￥', image: '' },
    { id: 12, name: '', price: '￥', image: '' },
    { id: 13, name: '', price: '￥', image: '' },
    { id: 14, name: '', price: '￥', image: '' },
    { id: 15, name: '', price: '￥', image: '' },
  ];

  const productsContainer = document.getElementById('products-container');

  products.forEach(product => {
    const productElement = document.createElement('div');
    productElement.className = 'product';
    productElement.innerHTML = `
      <img src="${product.image}" alt="${product.name}">
      <h3>${product.name}</h3>
      <p>${product.price}</p>
    `;
    productsContainer.appendChild(productElement);
  });
});
